<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>常识大挑战</title>
    <style>
        body {
            background-image: url('background.jpg'); /* 设置背景图片 */
            background-size: cover; /* 图片覆盖整个页面 */
            background-repeat: no-repeat; /* 不重复 */
            color: white; /* 文字颜色为白色 */
            font-family: Arial, sans-serif; /* 设置字体 */
            text-align: center; /* 文字居中 */
            margin: 0; /* 移除默认外边距 */
            padding: 0; /* 移除默认内边距 */
            height: 100vh; /* 设置高度为视口高度 */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container {
            background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景 */
            padding: 30px; /* 增加内边距 */
            border-radius: 10px; /* 圆角 */
            margin: 20px auto; /* 居中并添加外边距 */
            width: 90%; /* 增加容器宽度 */
            max-width: 800px; /* 设置最大宽度 */
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */
        }
        .option {
            margin: 15px auto; /* 增加上下外边距并居中 */
            padding: 15px; /* 增加内边距 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
            background-color: #f0f0f0; /* 选项背景颜色 */
            border-radius: 5px; /* 圆角 */
            color: black; /* 文字颜色 */
            font-size: 18px; /* 字号 */
            width: 80%; /* 设置宽度 */
            transition: background-color 0.3s, transform 0.3s; /* 添加过渡效果 */
        }
        .option:hover {
            background-color: #ddd; /* 鼠标悬停时的颜色 */
            transform: scale(1.02); /* 轻微放大效果 */
        }
        .hidden {
            display: none; /* 隐藏元素 */
        }
        #question {
            font-size: 26px; /* 增加问题字号 */
            margin-bottom: 25px; /* 增加下边距 */
            line-height: 1.4; /* 增加行高 */
        }
        #category {
            font-size: 20px; /* 增加分类字号 */
            padding: 10px 20px; /* 增加内边距 */
            border-radius: 20px; /* 增加圆角 */
            display: inline-block; /* 行内块显示 */
            margin-bottom: 20px; /* 增加下边距 */
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* 添加阴影 */
        }
        #feedback {
            font-size: 20px; /* 增加反馈字号 */
            font-weight: bold; /* 加粗 */
            margin: 15px 0; /* 增加上下外边距 */
            min-height: 30px; /* 设置最小高度 */
        }
        button {
            background-color: #4CAF50; /* 按钮背景颜色 */
            border: none; /* 移除边框 */
            color: white; /* 文字颜色 */
            padding: 15px 32px; /* 内边距 */
            text-align: center; /* 文字居中 */
            text-decoration: none; /* 移除文字装饰 */
            display: inline-block; /* 行内块显示 */
            font-size: 20px; /* 增加字号 */
            margin: 15px 2px; /* 增加上下外边距 */
            cursor: pointer; /* 鼠标悬停时显示手型 */
            border-radius: 8px; /* 增加圆角 */
            transition: all 0.3s; /* 添加过渡效果 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
        }
        button:hover {
            background-color: #3e8e41; /* 鼠标悬停时的颜色 */
            transform: scale(1.05); /* 轻微放大效果 */
        }
        .game-over {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            z-index: 999;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s, visibility 0.5s;
        }
        .game-over.show {
            opacity: 1;
            visibility: visible;
        }
        .game-over h2 {
            font-size: 36px;
            margin-bottom: 10px;
            color: #FF5252;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .game-over p {
            font-size: 24px;
            margin-bottom: 20px;
            color: #FFD700;
        }
        .game-over img {
            border: 4px solid #FF5252;
            box-shadow: 0 0 15px rgba(255, 82, 82, 0.7);
        }
        .game-over button {
            margin-top: 25px;
            background-color: #FF5252;
        }
        .game-over button:hover {
            background-color: #FF8A80;
        }
        .progress-info {
            margin-top: 15px;
            font-size: 18px;
            font-weight: bold;
            color: #FFD700; /* 金色 */
        }
        #start-screen p {
            font-size: 20px;
            margin-bottom: 25px;
        }
        h1 {
            font-size: 40px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        /* 添加一些额外的动画效果 */
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
            20%, 40%, 60%, 80% { transform: translateX(5px); }
        }
        .game-over.show h2 {
            animation: shake 0.8s ease-in-out;
        }
        
        /* 音频控制按钮样式 */
        .audio-control {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: rgba(0, 0, 0, 0.7);
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
            z-index: 1000;
            transition: all 0.3s;
        }
        .audio-control:hover {
            transform: scale(1.1);
        }
        .audio-control img {
            width: 30px;
            height: 30px;
        }
    </style>
</head>
<body>
    <!-- 音频控制按钮 -->
    <div class="audio-control" onclick="toggleAudio()">
        <img id="audio-icon" src="音效开.png" alt="音效开关">
    </div>
    
    <!-- 音频元素 -->
    <audio id="start-sound" src="进入游戏前.wav" preload="auto"></audio>
    <audio id="correct-sound" src="回答正确.wav" preload="auto"></audio>
    <audio id="wrong-sound" src="回答错误.wav" preload="auto"></audio>
    <audio id="complete-sound" src="游戏完成.wav" preload="auto"></audio>
    <audio id="victory-sound" src="游戏通关.wav" preload="auto"></audio>
    <audio id="fail-sound" src="游戏失败.wav" preload="auto"></audio>
    
    <div class="container">
        <h1>常识大挑战</h1>
        <div id="start-screen">
            <p>本游戏共有12道题目，准备好接受挑战了吗？</p>
            <button onclick="startGame()">开始挑战</button>
        </div>
        <div id="quiz-screen" class="hidden">
            <div id="category"></div>
            <h2 id="question"></h2>
            <div id="options"></div>
            <p id="feedback"></p>
            <div class="progress-info">
                <span id="progress-text">题目 1/12</span>
            </div>
        </div>
        <div id="result-screen" class="hidden">
            <h2>挑战结果</h2>
            <p id="score"></p>
            <img id="result-image" src="" style="max-width: 300px; border-radius: 10px; margin: 20px 0;">
            <button onclick="restartGame()">再玩一次</button>
        </div>
    </div>
    <div id="game-over" class="game-over hidden">
        <h2>游戏失败</h2>
        <p>你没有完成所有题目！</p>
        <img src="失败.jpeg" style="max-width: 300px; border-radius: 10px; margin: 20px 0;">
        <button onclick="restartGame()">再玩一次</button>
    </div>
    <script src="questions.js"></script>
    <script src="game.js"></script>
</body>
</html>